<template>
  <div class="layout-padding">
    <el-form inline :model="query">
      <el-form-item label="角色名称">
        <el-input
          v-model="query.name"
          maxlength="30"
          placeholder="请输入角色名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery()" icon="ele-Search" type="primary"
          >查询</el-button
        >
        <el-button @click="handleAdd()" icon="ele-Plus" type="success"
          >新增角色</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      ref="singleTableRef"
      :data="roleList"
      highlight-current-row
      border
      style="width: 100%"
    >
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column prop="roleName" label="角色名称" align="center" />
      <el-table-column prop="roleCode" label="角色编码" align="center" />
      <el-table-column prop="status" label="角色状态" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status ? 'success' : 'warning'">{{
            row.status ? "启用" : "停用"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            @click.stop="handlePermission(row)"
            icon="ele-Check"
            type="primary"
            link
            >分配权限</el-button
          >
          <el-button
            @click.stop="handleEdit(row)"
            icon="ele-Edit"
            type="warning"
            link
            >修改</el-button
          >
          <el-popconfirm
            width="auto"
            @confirm="handleDelete(row.id)"
            :title="`确定永久删除【${row.roleName}】吗？`"
          >
            <template #reference>
              <el-button icon="ele-Delete" type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Mpage :page="page" @pageChange="queryData"></Mpage>
    <!-- 新增修改组件 -->
    <RoleEdit ref="editRef" @refresh="queryData" />
    <!-- 分配权限 -->
     <Permission ref="permissionRef" />
  </div>
</template>

<script lang="ts" setup name="SystemRole">
import { ref, onMounted, reactive, toRefs } from "vue";
import { getPageList, deleteById } from "@/api/System/role";
import Mpage from "@/components/Global/Page.vue";
import RoleEdit from "./components/role-edit.vue";
import Permission from "./components/permission.vue";

import { ElNotification } from "element-plus";

const state = reactive({
  roleList: [],
  query: {
    name: "",
  },
  page: {
    current: 1,
    size: 20,
    total: 0,
  },
});
const { roleList, query, page } = { ...toRefs(state) };
onMounted(async () => {
  queryData();
});
const queryData = async () => {
  // 调用接口
  const { current, size } = state.page;
  const res = await getPageList(state.query, current, size);
  if (res.code === 200) {
    state.roleList = res.data.records;
    state.page.total = res.data.total;
  }
};
const handleQuery = () => {
  // 将页码设置为第1页
  state.page.current = 1;
  queryData();
};
const permissionRef = ref()
const handlePermission = (row) => {
    permissionRef.value.open(row)
};
const handleEdit = (row) => {
  editRef.value.open("edit", row);
};
const editRef = ref();
const handleAdd = () => {
  editRef.value.open("add");
};
const handleDelete = async (id) => {
  const res = await deleteById(id);
  if (res.code === 200) {
    ElNotification({
      message: res.message,
      type: "success",
    });
    queryData();
  }
};
</script>
<style lang="scss" scoped></style>
